<template>
  <div class="container">
    <top></top>
    <div class="content">
      <div class="banner">
        <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
      </div>
      <go></go>
      <eleven></eleven>
      <red></red>
      <prolist></prolist>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Lazyload, Search, Tab, Tabs } from 'vant'
import axios from 'axios'
import Go from '@/components/Go'
import Eleven from '@/components/Eleven'
import Red from '@/components/Red'
import Prolist from '@/components/Prolist'
import Top from '@/components/Top'

Vue.use(Swipe).use(SwipeItem)
Vue.use(Lazyload)
Vue.use(Top)
Vue.use(Tab).use(Tabs)
Vue.use(Search)
export default {
  data () {
    return {
      prolist: [],
      images: [
        'http://img0.imgtn.bdimg.com/it/u=410137747,215460389&fm=26&gp=0.jpg',
        'http://img2.imgtn.bdimg.com/it/u=1864125297,3563558451&fm=26&gp=0.jpg',
        'http://img3.imgtn.bdimg.com/it/u=1593141267,178841904&fm=26&gp=0.jpg',
        'http://img3.imgtn.bdimg.com/it/u=3523966735,1830780984&fm=26&gp=0.jpg'
      ]
    }
  },
  components: {
    top: Top,
    go: Go,
    Red: Red,
    prolist: Prolist,
    eleven: Eleven
  },
  mounted () {
    axios.get('https://www.daxunxun.com/douban').then(res => {
      console.log(res.data)
    })
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';

.header{
  width:4.14rem;
  height:0.45rem;
  // background-color:white;
  @include background-color(#fff);

  .search{
  width:3.33rem;
  height:0.29rem;
  background-color:white;
}
}
.banner{
  width:100%;
  height:1.8rem;
  overflow:hidden;
  img{
    width:100%;
    height:1.8rem;
  }
}
</style>
